In the previous lesson, we created the user interface for our app, mainly HTML and success with the
very last step being hiding the modal window through which will submit a new item.
So in this lesson, we will connect the basic logic for showing and hiding this model and submit a new
item to the main process.
I'll close this stylesheet for now, as will be working in this app mainly mindgames as well.
Keep Meinhardt html open for a reference as we'll be selecting these nodes by ID and open approaches.
The script we're linking here at Dodgiest then being responsible for everything that happens on the
user interface or the main window renderer process.
Remove this and start by referencing some of the DOM nodes will be adding event listeners to let show
model equal document dot get aliment by IED.
This button here with an idea of show model.
I'll duplicate this to speed things up.
This one setting close model get element by ID to close model being our cancel button in the middle
popover.
And the model itself selecting element with idy of model, OK, that will do for now we want to show
the model when show model is clicked and hide it again.
When clothes model is clicked, I'll add show model first listening on show model with ad event listener
for a click.
So clicking the plus button in the app header setting the models style dot display property to flex,
which if you recall from Main DOCSIS is how we had it initially before hiding it.
This JavaScript setting then will override any stylesheet styles as it will be applied in line.
That's all we need to show the model.
So duplicate this entire listener, foreclosing or hiding it, listening on close model the cancel button
for a click again setting the modals display style back to none.
We can test this.
Save the app reloads.
Click this plus button and there we have the model click cancel con.
OK, so that's our model working simple enough.
The next step we can add is getting the value of this.
You are all input when ad items clicked.
As before, reference those e-mail notes.
Add item selecting the button with ID add item.
And item, you are all the text input for the item, your URL, which has an ID of you, Orell.
And all new items being added.
Setting a click listener on that add item, button, add item, not add event listener click with a
callback in which will first make sure a value is set in the text input.
You can of course, go further by checking if it's a valid you are as well.
But this will suffice for now if item Euroleague value, meaning it's Truthy lot that value out for
now.
Save this T-test.
Open the modal.
My domain dot com.
Click, add item, and there we see the value logged in the console, so the basic user interface of
this model is now hooked up, but we can improve this slightly at the moment.
After clicking add item, you still need to click into the text area before typing an unnecessary step
as opening the model already implies the user wants to input a neutral.
We can easily fix this, though, adding immediately after showing the model item URL focus.
And there the text input is focused as soon as the model opens, a simple but significant improvement.
Another such improvement would be to allow the user to submit an item by hitting enter.
Right now, nothing happens when I press enter saving a further manual click on the add item button.
These small considerations for how users tend to interact with apps is very important to keep in mind.
Back in Dodges we can listen for a key event on that input.
Item URL being the input add event listener key up being when the user releases the key for a key such
as enter key down will be fine as well.
This will fire on any key being released.
So check for the entity with if e dot key this event object equals enter.
In which case perform a click on the add item button add item dot click.
Open the model and enter something my domain enter and there we get the same log in the console as we
essentially click this button for the user when they hit enter, we're now ready to start adding submitted
items.
So I'll remove this log message and to make this a bit easier.
Let's build the HTML that will represent such an item.
I'll just add a static item directly in the items container.
A dove worth a class of read item using a class this time as well have multiple items and what we all
want from such an item is the title.
So the title of the page loaded by the item URL and a thumbnail of the page, basically a screenshot
start with the thumbnail on the left of the item image with a test source of https placed hold it 500
by 500.
And an H2 tag for the title title of item added.
That's it, really basic.
We can add some styling to these items, open mind access.
All the way at the end.
Add on the Reid item class.
Display Fleck's.
A line items center, same for Fleck's content center, a bottom border to separate these items, light
gray, two pixels solid.
With a slightly off white background FFA and 10 pixels of padding size, the item, thumbnail read item
image.
With 20 per cent worth, a 25 pixel margin on the right to separate it from the title, check this so
far, reload and that looks about right.
Make sure our app header remains static once we have more items in this window space.
I'll duplicate them a few times.
Save, reload, scroll, and there's a problem.
This letter should stay fixed at the top here with the items container only taking the remaining space
as a flex column, I set the body to have a display of flex column, meaning the flex grow properties
should be set on the main tag, not items.
I'll change this to main being the sibling tag of the header, not items, and also give this an overflow
of scroll save and try again.
There this time it works, the body element is a flex column, the header takes up its needed amount
of space and then the main tag containing the items and the no items message has a flex grow property
of one meaning take up whatever remains of the body.
I'll get rid of these items until we add a real item later.
Resetting items to an empty container.
Then back in Jayesh, we'll have to send the euro of the new item to the main process, the main process
will fetch the item, screenshot and title, returning it to the renderer where we can create an item
out of it and add it to the app.
To do this will, of course, be using epoxy messaging or more specifically in the renderer process.
Epoxy renderer send require that module.
Const ipsi renderer using destruction assignment equals require electron.
Set a channel name to this over new item, sending the URL of the new item item, URL dot value.
That's all there is to sending the item.
So over two main dossiers where we can listen on that channel for a new item, first requiring IPSI
Main, the main process equivalent of IPSI Renderer listening in the global scope.
Not that this matters for a new item request.
IPC main on this channel named item, your URL is being sent over.
New item, a callback providing the event object and the data being sent Corlett item neutral in this
case, which I'll again log out for now.
The app relaunches, so add a new item, my domain dot com enter, check the terminal for the main process
log and there we have it.
So we're successfully sending the item you URL to the main process where we can now get the new item
and send it back to the renderer, the actual fetching of the new item will do in the next lesson.
So for now, I'll just simulate the weight it'll take with a time out of two seconds sending back to
the sender of this message, each dot sender being the center of this event.
New item success, the channel name on which will be listening for the returned items in the renderer.
New item from main process, a simple string for now until we implement this at the corresponding listener
on the renderer.
Listen for new item from making process.
Worth ipsi renderer on that response channel, new item success, same callback as in the main process,
IPC module event and data or new item being that simple string for now.
So log it out.
Save both these files.
Adding my domain dot com, remember, this will now be sent to the main process and after two seconds
we'll get a response, enter.
And their new item from main process, so that's all good, we now have two way communication in place,
but at the moment, during the time it takes the main process to fetch the item or in our case, for
now, during that two second time out, this button can be clicked again and again, resulting in duplicate
items or even a lock up if the user clicks it enough times.
So to communicate to the user that this item is being fetched and added, we'll have to provide some
visual feedback and disable the add button.
Re-enable that only once the new item is back from the main process and everything is done.
To do this, I'll create a reusable function, disable and enable modal buttons, a toggle, so to speak.
Assign this function to toggle modal buttons equals a function.
First thing in toggling a button would be to know whether it's currently enabled or disabled.
So check state.
If an item.
Not disabled equals true meaning, it's disabled and we have to toggle it back on or else meaning it's
enabled and needs to be disabled.
I'll start with this as the first will be reverting the button state back to what we currently have
said, ad item disabled to try to make the button slightly transparent, to better show the state to
the user style, not opacity equals nought point five or 50 per cent.
Change the button text to a more appropriate label in a text equals adding remember this disabled state
being when an item is being sent to the main process and is being waited on in the renderer, we can
also hide the cancel button.
No use having the user close the model whilst an item is being fetched.
Close model dot style dot display equals none.
I'll copy all the settings to the first condition.
Where will revert them to the original state.
Disabled false opacity.
One button text back to add item and show the cancel button with display in line its default display
property.
Copy this function calling it immediately after sending a new item request to the main process which
will disable the buttons, toggle modal buttons and then again after receiving the new item back from
the main process, which will of course re-enable the buttons, we can also at this point hide the model
and clear the input value, keeping it ready for another new item to be added.
Same as clicking the cancel button said the model elements display to none and itemise Earles value
back to an empty string save.
Click to add a new item.
My item, dotcom, noticed the button.
Now, when I submit this enter and disabled with the modal closing, as soon as that new item is received
back from the main process, reopen it and it's ready for a new item URL with the button enabled and
the URL input empty in.
The next lesson will implement the off screen renderer to create that new item from Ertuğrul.